<template>
  <div>
    <el-card>
      <el-form ref="ruleForm" :model="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="姓名:">
          <div>{{ name }}</div>
        </el-form-item>
        <el-form-item label="公司名称:">
          <div>{{ company }}</div>
        </el-form-item>
        <el-form-item label="面试问题:">
          <div v-html="question"></div>
        </el-form-item>
        <el-form-item label="面试录音:">
          <div style="width:280px;">
            <aplayer v-if="flag" :music="videoUpload.music" />
          </div>
        </el-form-item>
        <el-form-item label="老师总结:">
          <el-input v-model="ruleForm.sumup" type="textarea" />
          <!-- <el-input v-else disabled type="textarea" v-model="ruleForm.sumup"></el-input> -->
        </el-form-item>
        <el-form-item class="tij">
          <el-button type="primary" @click="add">发布总结</el-button>
          <el-button type="primary" @click="fan">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- <h4>复盘总结</h4>
            <p>姓名:{{name}} </p>
            <p>公司:{{company}} </p>
            <p>问题:{{question}} </p>
            <div style="width:280px;">
                <span class="lb-ico" @click="handlePlayAudio">
                <img
                :src="
                isPlay
                ? 'https://static.xfanread.com/readingDay2020/quickspot/bf@2x.png'
                : 'https://static.xfanread.com/readingDay2020/quickspot/jy@2x.png'
                "
                />
                <audio
                ref="audio"
                :src="resData.questionAudio"
                @ended="audioEnd"
                ></audio>
                </span>
            </div> -->
  </div>
</template>

<script>
import aplayer from 'vue-aplayer'
export default {
  components: { aplayer },
  props: {},
  data() {
    return {
      ruleForm: {
        id: '',
        sumup: ''
      },
      name: '',
      company: '',
      question: '',
      videoUpload: {
        theme: '#ffc0cb',
        autoplay: true,
        repeat: 'repeat-one', // 轮播模式。值可以是 'repeat-one'（单曲循环）'repeat-all'（列表循环）或者 'no-repeat'（不循环）。为了好记，还可以使用对应的 'music' 'list' 'none'
        mini: true, // 迷你模式
        float: true, // 浮动模式。你可以在页面上随意拖放你的播放器
        music: { // 当前播放的音乐
          title: '面试录音',
          artist: '咖啡少年',
          src: '',
          pic: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.SqjLnfdtr22QOTWTSTvuhQHaFK?w=292&h=204&c=7&r=0&o=5&dpr=1.12&pid=1.7' // 封面图片
        }
      },
      // isPlay: false, // 是否播放
      // resData: {
      //     questionAudio:'', // 音频
	    // },
      flag: false,
      role: ''
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getxq()
    this.ruleForm.id = this.$route.query.id
    //   this.role=sessionStorage.getItem("user")
  },
  async mounted() {
    // 异步加载，先加载出player再使用
    await this.init()
    // let aplayer = this.$refs.player.control;
    aplayer.play()
  },
  methods: {
    async getxq() {
      var res = await this.http.get(`/replay/replay/${this.$route.query.id}`)
      console.log(this.$route.query.id)
      console.log(11111111111111)
      console.log(res)

      if (res.status == 200) {
        this.name = res.data.name
        this.videoUpload.music.artist = res.data.name
        this.company = res.data.company
        this.question = res.data.question
        this.videoUpload.music.src = res.data.record_src
        // this.resData.questionAudio=res.data.data.lu
      }
      console.log(this.videoUpload.music)
    },
    async add() {
      var res = await this.http.patch(`/replay/replay/${this.ruleForm.id}`, {
        sumup: this.ruleForm.sumup
      })
      if (res.status == 200) {
        this.$message.success('发布成功')
        this.$router.push('/fupanjie')
      }
    },
    fan() {
      this.$router.push('/fupanjie')
    },
    // handlePlayAudio() {
	    //   // console.log(111)
	    //   this.$refs.audio.play() // 这里使用了audio的原生开始播放事件,同样不加on, 并使用ref获取dom
	    //   this.isPlay = true
	    // },
	    // // 音频停止后, 把喇叭置灰
	    // audioEnd() {
	    //   // console.log(1111)
	    //   this.isPlay = false
	    // },
    async init() {
      var res = await this.http.get('/replay/replay', {
        params: {
          id: this.$route.query.id
        }
      })
      console.log(res)
      if (res.data.code == 200) {
        this.videoUpload.music.src = res.data.data.lu
      }
      // 因为是异步请求，所以一开始播放器中是没有歌曲的，所有给了个v-if不然会插件默认会先生成播放器，导致报错(这个很重要)
      this.flag = true
    }
  }
}
</script>
<style  scoped>
    .el-form{
        margin-top: 15px;
    }
    .el-form-item p{
      float: left;
      /* font-size: px */
    }
</style>
